<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>3D展览馆</title>
  <!-- Font Awesome -->
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.min.css" rel="stylesheet">
</head>

<body>

  <!--Main Navigation-->
  <header>

    <!-- Navbar -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
      <div class="container">
        <!-- Brand -->
        <a class="navbar-brand waves-effect" href="#">
          <strong class="blue-text">3D 文物展览馆</strong>
        </a>
      </div>
    </nav>
    <!-- Navbar -->

  </header>
  <!--Main Navigation-->

  <!--Main layout-->
  <main class="mt-5 pt-5">
    <div class="container">

      <!--Section: Jumbotron-->
      <section class="card wow fadeIn" style="background-image: url(img/bg.jpg);">

        <!-- Content -->
        <div class="card-body text-white text-center py-2 px-2 my-2">

          <h3 class="mb-4">
            <strong>欢迎来到3D展览馆</strong>
          </h3>
          <p class="mb-7">
            <strong>历史的长河，时间的脚印将他们埋没。3D展览馆不生产实物，我们只是搬运工，将遗失的记忆再次复原</strong>
          </p class="mb-7">
		  <p>
            <strong>长长的记忆为你呈现......</strong>
          </p>
        </div>
        <!-- Content -->
      </section>
      <!--Section: Jumbotron-->

      <hr class="my-5">

      <!--Section: Cards-->
      <section class="text-center" >

        <!--Grid row-->
        <div class="row mb-6 wow fadeIn" id="3dAppend">
          <!--Grid column-->
         
		</div>
          <!--Grid column-->
		  
      </section>
      <!--Section: Cards-->
    </div>
  </main>
  <!--Main layout-->


  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    //new WOW().init();
	
	function readJSON(){
			$.getJSON("home/3d.json", function (data){
				var $jsontip = $("#3dAppend");
			    var strHtml = "";
			    //存储数据的变量 
			   $.each(data, function (infoIndex, info){
					var name=info.name;
					var key=info.key;
					var desc=info.desc;
					var footer=getFooter(name,key,desc);
					strHtml=strHtml+footer;
			   }) 
			   $jsontip.append(strHtml);
			  //显示处理后的数据 
			});
		}
		
		function getFooter(name,key,desc){
		var htmlUri="./html/"+key+"\.html";
		var imagePath="./img/3d/"+key+".jpg";
	
		
		 var footer="<div class=\"col-lg-3 col-md-3 mb-3\">"
            +"<div class=\"card\">"
            +"<div class=\"view overlay\">"
			+" <a href='"+htmlUri+"' target='_Blank' > "
            +"<img src='"+imagePath+"' style='width:100%;height:30%;padding:2px;border:1px solid #33AECC' class=\"card-img-top>"
            +"<a href=\"#\">"    
            +"<div class=\"mask rgba-white-slight\"></div>"
            +" </a>" 
			+" </a>"   			
            +" </div>"   
            +" <div class=\"card-body\">"
			+"<h4 class=\"card-title\" style='color:#33AECC'>"+name+"</h4>"
			+"<p class=\"card-text\">"+desc+"</p>"
			+"</div>"
			+"</div>"
			+"</div>";
              
		
			
			return footer;
		}
		readJSON();
  </script>
</body>

</html>
